<template>
  <div>
    <el-form-item label="提交可见">
      <span slot="label">
        提交可见
        <el-tooltip
          class="item"
          content="提交表单后可以看到此编号，可作为回执编号使用"
          effect="dark"
          placement="top-start"
        >
          <i class="el-icon-question" />
        </el-tooltip>
      </span>
      <el-switch v-model="activeData.submitVisible" />
    </el-form-item>
    <el-divider>随机编号规则</el-divider>
    <el-form-item v-for="(rule, index) in activeData.rules" :key="rule.type" :label="rule.label">
      <el-input :placeholder="`随机${rule.length}位数字`" readonly>
        <el-button slot="append" icon="el-icon-s-tools" @click="handleOpenSetting(rule, index)" />
      </el-input>
    </el-form-item>

    <el-dialog title="规则设置" :visible.sync="dialogFormVisible">
      <el-form :model="selectRule">
        <el-form-item v-if="selectRule.type == 'RAND_NUMBER'" label="长度" label-width="120px">
          <el-input-number v-model="selectRule.length" :min="5" :max="20" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取 消 </el-button>
        <el-button type="primary" @click="handleSaveSetting"> 确 定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ConfigItemRandomNumber',
  props: ['activeData'],
  data() {
    return {
      dialogFormVisible: false,
      selectRule: {},
      selectIndex: 0
    }
  },
  methods: {
    handleOpenSetting(item, index) {
      this.selectIndex = index
      this.selectRule = item
      this.dialogFormVisible = true
    },
    handleSaveSetting() {
      this.$set(this.activeData.rules, this.selectIndex, this.selectRule)
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped></style>
